<script setup>
import myAxios from "@/plugins/myAxios.js";
import { Toast } from "vant";
import {onMounted, ref} from "vue";
import { useRouter } from "vue-router";

const router = useRouter();
const userAccount = ref("");
const userPassword = ref("");
const onSubmit = async () => {
    // 发登录请求
    myAxios
        .post("/user/login", {
            userAccount: userAccount.value,
            userPassword: userPassword.value,
        })
        .then((res) => {
            if (res.data.code == 1) {
                Toast.success("用户(" + res.data.data.username + ")\n登录成功");
                console.log("用户(" + res.data.data.username + ")登录成功");
                router.replace({
                    path: "/inter",
                });
            } else {
                Toast.fail("登录失败：" + res.data.msg);
                console.log("登录失败" + res.data.msg);
            }
        })
};

</script>
<template>
    <van-nav-bar title="用户登录" style="border-bottom: 1px solid #1989fa; "/>
    <div style="width: 100%">
      <div style="margin: 30px auto; width: 10rem">
        <van-image
            id="logo"
            width="10rem"
            height="10rem"
            fit="cover"
            position="center"
            src="https://lishui-bucket.oss-cn-beijing.aliyuncs.com/water-blue.png"
        />
      </div>
    </div>
    <h2 style="text-align: center;">伙伴寻访园子</h2>
    <van-form @submit="onSubmit">
        <van-cell-group inset>
            <van-field
                v-model="userAccount"
                name="userAccount"
                label="账号"
                placeholder="请输入账号"
                :rules="[{ required: true, message: '请填写账号' }]"
            />
            <van-field
                v-model="userPassword"
                type="password"
                name="userPassword"
                label="密码"
                placeholder="请输入密码"
                :rules="[{ required: true, message: '请填写密码' }]"
            />
        </van-cell-group>
        <div style="margin: 16px">
            <van-button round block type="primary" native-type="submit">
                登录
            </van-button>
        </div>
    </van-form>
  <div style="margin: 16px">
    <van-button round block type="success" to="/register">注册</van-button>
  </div>
  <van-divider
      :style="{
                color: '#1989fa',
                borderColor: '#1989fa',
                padding: '0 16px',
            }"
  >
  </van-divider>
</template>
<style scoped lang="scss"></style>
